import { defineStore } from "pinia";
import { nanoid } from "nanoid";
import { reactive } from "vue";

// export const useLoveTalkStore = defineStore("loveTalk", {
//   actions: {
//     async addTalk() {
//       const res = await fetch(
//         "https://api.uomg.com/api/rand.qinghua?format=json",
//       );
//       const talk: TalkJsonData = await res.json();
//
//       this._talkList.unshift({ id: nanoid(), title: talk.content });
//     },
//   },
//   state() {
//     return {
//       _talkList: <Talk[]>(JSON.parse(localStorage.getItem("TALK_LIST")!) || []),
//     };
//   },
//   getters: {
//     // 方式1
//     // talkList: (state) => state._talkList,
//     // 方式2
//     talkList(): Talk[] {
//       return this._talkList;
//     },
//   },
// });

export const useLoveTalkStore = defineStore("loveTalk", () => {
  const talkList = reactive<Talk[]>(
    JSON.parse(localStorage.getItem("TALK_LIST") as string) || [],
  );

  const addTalk = async () => {
    const res = await fetch(
      "https://api.uomg.com/api/rand.qinghua?format=json",
    );
    const talk: TalkJsonData = await res.json();

    talkList.unshift({ id: nanoid(), title: talk.content });
  };

  return { talkList, addTalk };
});
